<template>
  <div ref="container">
    <div v-for="child in mockData" :key="child">
      {{ child }}
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const container = ref();
const mutationObserver = ref(null);
const mockData = ref([]);

const desiredFunc = () => {
  console.log('children changed');
};

const connectMutationObserver = () => {
  mutationObserver.value = new MutationObserver(desiredFunc);

  mutationObserver.value.observe(container.value, {
    attributes: true,
    childList: true,
    characterData: true,
    subtree: true,
  });
};

const disconnectMutationObserver = () => {
  mutationObserver.value.disconnect();
};

onMounted(async () => {
  connectMutationObserver();
  setTimeout(() => { mockData.value = [1, 2, 3] }, 5000)
});

onUnmounted(() => {
  disconnectMutationObserver();
})
//https://stackoverflow.com/questions/38148297/in-vue-js-can-a-component-detect-when-the-slot-content-changes
</script>